<template>
	<view class="item_content">
		<view class="item_head" :style="bgStyle">
			<view class="head_content" :style="cardStyle">
				<view v-if="userInfo.level > 0" :style="fontStyle">
					<view class="head_avatar">
						<u-avatar :size="92" :src="userInfo.picurl" :mode="mydata.type.avart_type == 1 ? 'circle' : 'square'"></u-avatar>
						<view class="head_inf">
							<view class="number" :style="numStyle">
								{{ userInfo.nickname }}
								<!-- 137****1234 -->
							</view>
							<view class="txt">
								历史消费金额
								<text class="number" :style="numStyle" style="margin:0 10rpx;font-size:28rpx">{{ userInfo.total_money }}</text>
								元
							</view>
						</view>
					</view>
					<view class="effective">
						<view class="txt" v-if="userInfo.level_time">有效时间：{{ userInfo.level_time.split(' ')[0] }} 至 {{ userInfo.level_time.split(' ')[0] }}</view>
						<view class="txt" v-else>有效时间：永久有效</view>
						<view style="line-height: 0rpx;margin-top: 6rpx;" v-if="level_data.is_cash_upgrade">
							<u-line-progress :show-percent="false" height="8" :active-color="mydata.color.progress_color" :percent="press"></u-line-progress>
						</view>
					</view>

					<view class="head_food">
						<view class="txt">
							本月消费金额
							<text class="number" :style="numStyle" style="margin:0 10rpx;font-size:28rpx">{{ userInfo.level_money }}</text>
							元
						</view>
						<view class="txt" v-if="level_data.is_cash_upgrade">
							距离V{{ userInfo.level + 1 }}等级还差
							<text class="number" :style="numStyle" style="margin:0 10rpx;font-size:28rpx">{{ level_data.reach_cash - userInfo.level_money }}</text>
							元
						</view>
					</view>
					<view class="head_rule" :style="ruleStyle" @click="showRule">
						<view class="grade" :style="roundStyle">v{{ userInfo.level }}</view>
						<view class="txt">会员规则</view>
					</view>
					<view class="head_btn" :style="ruleStyle"><view class="txt" @click="openMember">等级列表</view></view>
				</view>
				<view :style="fontStyle" v-else>
					<view class="head_title">会员等级</view>
					<view class="head_inf ititle">开通会员可享受以下权力</view>
					<view class="head_icon">
						<view class="item">
							<view class="el-icon-s-promotion"></view>
							<view>全场包邮</view>
						</view>
						<view class="item">
							<view class="el-icon-s-promotion"></view>
							<view>专属折扣</view>
						</view>
					</view>
					<view class="head_rule" :style="ruleStyle" @click="showRule">
						<view class="grade" :style="roundStyle">v{{ userInfo.level }}</view>
						<view class="txt">会员规则</view>
					</view>
					<view class="head_ibtn" :style="ruleStyle" @click="openMember">开通会员</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="600rpx" height="800rpx" border-radius="14" :closeable="true">
			<view class="popup-content">
				<view class="content_title">{{ popupContent.title }}</view>
				<u-parse :tag-style="style" :domain="baseUrl" :html="popupContent.content" :show-with-animation="true"></u-parse>
			</view>
		</u-popup>
	</view>
</template>

<script>
import base from '@/common/baseUrl.js';
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js'
export default {
	data() {
		return {
			show: false,
			popupContent: {},
			level_data: {},
			press:0,
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
		};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		bgStyle() {
			return 'background:' + this.mydata.color.bg_color;
		},
		cardStyle() {
			if (this.mydata.is_open == 1) {
				if (this.mydata.type.card_type == 1) {
					return 'background:linear-gradient(71deg,' + this.mydata.color.card_bg_color_f + ' 0%,' + this.mydata.color.card_bg_color_l + ' 100%);';
				} else if (this.mydata.type.card_type == 2) {
					if (this.mydata.card_img == '') {
						return "background:url('~@/assets/images/vip_bg.png');";
					} else {
						return "background:url('" + this.mydata.card_img + "');";
					}
				}
			} else {
				if (this.mydata.type.card_type_open == 1) {
					return 'background:linear-gradient(71deg,' + this.mydata.color.card_bg_color_f_open + ' 0%,' + this.mydata.color.card_bg_color_l_open + ' 100%);';
				} else if (this.mydata.type.card_type_open == 2) {
					if (this.mydata.card_img == '') {
						return "background:url('~@/assets/images/vip_bg.png');";
					} else {
						return "background:url('" + this.mydata.card_img_open + "');";
					}
				}
			}
		},
		fontStyle() {
			return 'color:' + this.mydata.color.card_font_color + ';';
		},
		numStyle() {
			return 'color:' + this.mydata.color.card_num_color;
		},
		ruleStyle() {
			return 'background:' + this.mydata.color.card_rule_color + ';color:' + this.mydata.color.card_rule_btn_color;
		},
		roundStyle() {
			return (
				'background:linear-gradient(71deg,' +
				this.mydata.color.card_round_color_f +
				' 0%,' +
				this.mydata.color.card_round_color_l +
				' 100%); color:' +
				this.mydata.color.card_grade_color
			);
		},
		baseUrl() {
			return util.geturl(base.baseUrl)
		},
		...mapState({
			userInfo: state => state.userInfo,
			oss: state => state.oss
		})
	},
	created() {
		let _this = this;		
		this.getDataList();
	},
	methods: {
		getDataList() {
			this.$http('/membership/level', {}, 'get').then(res => {
				let dataList = res.data.msg;
				let level = this.userInfo.level+1;
				// if (level == 0) {
				// 	level = 1;
				// }
				let level_data = dataList.filter(a => {
					return a.level == level;
				});
				if(level_data.length==1){
					this.level_data = level_data[0];
					let reach_cash=this.level_data.reach_cash;
					let press=this.userInfo.level_money/reach_cash;
					this.press=parseInt(press*100)
				}								
			});
		},
		showRule() {
			this.$http('/protocol/4', {}, 'GET').then(res => {
				this.popupContent = res.data.msg;
			});
			// https://z.jingzhe365.com
			this.show = true;
		},
		openMember() {
			this.Jumpurl({
				link: '../rewardList/rewardList?level=' + this.level,
				type: 1,
				login_type:2,
				level: this.level
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.item_content {
	width: 100%;

	.item_head {
		width: 100%;
		position: relative;
		padding: 60rpx 30rpx 0;
		overflow: hidden;

		.head_content {
			position: relative;
			border-radius: 20rpx 20rpx 0 0;
			z-index: 1;
			width: 100%;
			height: 272rpx;
			background: linear-gradient(71deg, #a98550 0%, #e2cc9d 100%);
			background-size: cover;
			background-repeat: no-repeat;
			box-shadow: rgba(0, 0, 0, 0.7) 0 4rpx 20rpx;
			padding: 30rpx 40rpx;
			font-family: PingFang SC;
			font-size: 24rpx;
			overflow: hidden;

			.head_avatar {
				display: flex;
			}

			.head_inf {
				line-height: 40rpx;
				letter-spacing: 1rpx;
				margin-left: 10rpx;
				padding: 10rpx;

				.number {
					color: #fff;
					font-size: 32rpx;
				}

				.txt {
					margin-top: 4rpx;
				}
			}

			.effective {
				margin-top: 10rpx;
				.txt {
					margin-bottom: 10rpx;
				}
			}

			.head_food {
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;

				.txt {
					align-content: center;
				}

				.txt:first-child {
					transform: scale(0.9);
					transform-origin: 0 50%;

					.number {
						color: #fff;
						font-size: 28rpx;
					}
				}

				.txt:last-child {
					transform: scale(0.9);
					transform-origin: 100% 50%;

					.number {
						color: #fff;
						font-size: 28rpx;
					}
				}
			}

			.head_rule {
				position: absolute;
				display: block;
				right: 0;
				top: 40rpx;
				z-index: 2;
				width: 160rpx;
				height: 56rpx;
				background: #52555e;
				box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.3);
				opacity: 1;
				border-radius: 30rpx 0 0 30rpx;
				padding: 10rpx 0 10rpx 10rpx;
				display: flex;
				align-items: center;

				.grade {
					width: 40rpx;
					height: 40rpx;
					background: linear-gradient(360deg, #c4a674 0%, #d9c191 100%);
					border-radius: 50%;
					text-align: center;
					font-size: 26rpx;
					line-height: 40rpx;
					font-weight: 400;
					color: #fff;
				}

				.txt {
					margin-left: 6rpx;
				}
			}

			.head_btn {
				position: absolute;
				display: block;
				right: 10rpx;
				top: 116rpx;
				z-index: 2;
				padding: 10rpx 20rpx;
				background: #52555e;
				box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
				opacity: 1;
				border-radius: 26rpx;
			}

			.head_title {
				font-size: 34rpx;
				letter-spacing: 2rpx;
				line-height: 44rpx;
			}

			.ititle {
				margin: 0;
				padding: 0;
				margin-top: 10rpx;
				line-height: 1;
			}

			.head_icon {
				display: flex;
				align-items: center;
				margin-top: 40rpx;
				letter-spacing: 2rpx;

				.item {
					margin-right: 10rpx;
				}
			}

			.head_ibtn {
				position: absolute;
				margin-top: 10rpx;
				right: 40rpx;
				display: block;
				padding: 15rpx 30rpx;
				background: #52555e;
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.16);
				opacity: 1;
				border-radius: 60rpx;
			}
		}
	}

	.item_head::before {
		content: '';
		width: 100%;
		height: 100rpx;
		z-index: 99;
		position: absolute;
		bottom: -100rpx;
		background: #fff;
		box-shadow: rgba(0, 0, 0, 0.5) 0 -10rpx 40rpx;
	}
}

</style>
